import {useRef } from 'react';
import { TaskLogsProps } from './types';

export const TaskLogs = ({ logs, onClearLogs }: TaskLogsProps) => {
  const logsEndRef = useRef<HTMLDivElement>(null);


  return (
    <div className="bg-white dark:bg-gray-800 rounded-lg shadow-md">
      <div className="p-6">
        <div className="flex justify-between items-center mb-4">
          <h2 className="text-xl font-semibold dark:text-white">执行日志</h2>
          <div className="flex items-center gap-3">
            <div className="text-sm text-gray-500 dark:text-gray-400">
              共 {logs.length} 条日志
            </div>
            {logs.length > 0 && onClearLogs && (
              <button 
                onClick={onClearLogs}
                className="text-xs px-2 py-1 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 rounded text-gray-700 dark:text-gray-300"
              >
                清空
              </button>
            )}
          </div>
        </div>
        
        <div className="text-xs text-gray-500 dark:text-gray-400 mb-2">
          在此处可以查看任务执行的实时日志
        </div>
        
        <div className="bg-gray-50 dark:bg-gray-900 border dark:border-gray-700 rounded-md p-4 h-[400px] overflow-y-auto font-mono text-sm">
          {logs.length === 0 ? (
            <div className="text-gray-400 dark:text-gray-500 italic">
              暂无执行日志，开始执行任务后日志将显示在此处...
            </div>
          ) : (
            logs.map((log, index) => (
              <div key={index} className="mb-1 text-gray-700 dark:text-gray-300">
                <span className="text-gray-400 dark:text-gray-500 mr-2">
                  [{new Date().toLocaleTimeString()}]
                </span>
                {log}
              </div>
            ))
          )}
          <div ref={logsEndRef} />
        </div>
      </div>
    </div>
  );
}; 

export default TaskLogs;